<template>
  <div class="container">
    <m-header />
    <div class="echarts-flex">
      <div class="el-tit-box">
        <span class="biao">#</span>
        <p class="tit">{{ topic }}</p>
        <span class="tips">(所属议yi题)：{{ "香港港版国安法" }}</span>
      </div>
      <div class="tpi-content">
        <div class="tree-list">
          <p class="cont-tit">
            <i class="el-icon-tickets"></i>
            事件列表
          </p>
          <ul>
            <li v-for="(item, index) in dataList" :key="index" @click="getData(index)" :class="isActiveIndex == index?'active':''">
              <p class="txt">
                <i class="sort"></i>
                <span>{{ item.tit }}</span>
              </p>
              <p class="time">{{ item.time }}</p>
            </li>
          </ul>
        </div>
        <div
          class="detail-info"
          v-loading="loading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.8)"
        >
          <p class="cont-tit">
            <i class="el-icon-document"></i>
            xx策略
          </p>
          <div class="el-box">
            <d-bar id="platform" :yLabel="yLabel" :yData="yData"></d-bar>
          </div>
          <ul class="info-item">
            <li v-for="(item, index) in newsList" :key="index">
              <p class="tit">{{ `${item.tit}(${item.proportion})` }}</p>
              <p class="txt">{{ item.txt }}</p>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import mHeader from "components/mHeader";
import dBar from "@/components/echarts/defaultbar.vue";
import { getRequest } from "@/utils/index";
import "../../styles/common/index.scss";
import "./topics.scss";
import mixins from "@/components/echarts/mixins";

export default {
  name: "topics",
  mixins: [mixins],
  components: {
    mHeader,
    dBar,
  },
  data() {
    return {
      loading: true,
      topic: "",
      isActiveIndex: 0,
      dataList: [
        {
          tit: "华山小学大队辅导员带领三名少先队员到西光中学考点执...",
          time: "07月10日 11:39",
        },
        {
          tit: "山西沁源高考遇降雨，送考途中一名考生父亲坚持...",
          time: "07月10日 11:39",
        },
        {
          tit: "唐延路中队铁骑何亚泽仅用时13分钟往返于学校学生家里",
          time: "07月10日 11:39",
        },
        {
          tit: "陈国昌是福田派出所从警25年的民警，7月7日清晨参与...",
          time: "07月10日 11:39",
        },
        {
          tit: "作为一位高三教师，和学生一起封校学习，陪伴他们",
          time: "07月10日 11:39",
        },
      ],
      yLabel: ["低调应对", "正面回应", "专题报道", "强力发声", "表明立场"],
      yData: [
        {
          value: [0.05, 0.05, 0.15, 0.27, 0.48],
        },
      ],
      newsList: [
        {
          tit: "表明立场",
          proportion: 0.47,
          txt:
            "中国联合国协会理事林琳9月21日在日内瓦人权理事会有关国际秩序的会议上发言，指出香港人在连月的恐怖袭击中过著悲惨生活，直到颁布《香港国安法》后才能稳定下来。她呼吁国际社会停止支持暴力，这里是“一国两制”，并不是一国和另一个独立国家.",
        },
        {
          tit: "强力发声",
          proportion: 0.28,
          txt:
            "联合国人权理事会奥兰等特别机制专家，竟罔顾事实、恶意诽谤，发出信函攻击中国人权状况，抹黑香港国安法。这种行为，中国人民绝不接受。以立法保障国家安全，这是世界各国通行做法。有关特别机制专家对香港国安法的无端指责完全站不住脚。香港国安法制定实施以来，香港市民广泛支持，危害国家安全的犯罪得到有力遏制，香港社会正在恢复秩序和安宁。某些“专家”毫无专业素养，满脑子傲慢与偏见，肆意歪曲污蔑，滥用“话语权”，给某些西方国家和反华势力当“吹鼓手”，丧失了起码的职业道德和操守，毫无公信力可言，根本不值一驳",
        },
        {
          tit: "专题报道",
          proportion: 0.15,
          txt:
            "香港国安法立法实施后，美国于8月声称要“制裁”中国内地及香港官员。香港特别行政区行政长官林郑月娥、警务处处长邓炳强等11人均在美国的“制裁名单”之列。9月25日，美国财政部公布了执行细节，禁止美国人与这11名官员交易 ",
        },
      ],
    };
  },
  mounted() {
    const topic = getRequest("title");
    this.topic = topic;
    this.loading = false;
  },
  methods: {
    getData(index) {
      let that = this;
      that.loading = true;
      that.isActiveIndex = index
      setTimeout(() => {
        that.yLabel = [1, 2, 3, 4, 5];
        that.yData = [{ value: [0.1, 0.5, 0.6, 0.09, 0.01] }];
        that.loading = false;
      }, 2000);
    },
  },




  
};
</script>
